<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_图片插入练习</title>
</head>
<body>
    <!-- 相对路径:从当前html文件出发去找资源
       1)图片与html文件在同一级目录:直接写图片全名!
       2)图片在html文件的上一级目录:先../回到上一级,再写图片全名!
       3)图片在html文件的下一级目录:先写目录名,再写图片全名!
       -->
    <img src="1.png">
    <img src="../2.png">
    <img src="img/3.png">
    <!-- alt属性是当图片无法正常加载时展示的替换文字 -->
    <img src="abc.png" alt="哎呀,图片被外星人偷走了">
    <!-- width设置图片宽度 height设置图片高度
       图片失真:图片的宽高比例不对 压缩或拉伸了
       图片本身是有大小和宽高比的,可以只设置宽高其中的一个属性,另外一个会跟着改-->
    <img src="img/zly.jpg" width="100px" height="100px">
    <img src="img/zly.jpg" width="100px">
    <img src="img/zly.jpg" height="100px" title="这是一个美女的照片">
    <!-- 绝对路径:从协议/盘符根路径出发去找资源 -->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///f044221ee737404e91584a4d083764bd.png" alt="">
</body>
</html>